<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>节拍计算</title>
    <style>
        .gd {
            width: 350px;
            height: 700px;
            background-color: #5e6160;
            margin: 0 auto;
        }

        .gd p {
            border: 1px white dashed;
            margin-bottom: 150px;
            position: relative;
            animation-name: exp;
            animation-duration: 0s;
            animation-timing-function: linear;
            animation-iteration-count: infinite;

        }

        .gd div {
            border: 1px red dashed;
            margin-top: 150px;
        }

        @keyframes exp {
            from {
                top: 0;
            }
            to {
                top: 150px;
            }
        }

        .line{
            position: relative;
        }

        .lineL::before{
            position: absolute;
            top: -10px;
            left: 70px;
            content: '';
            width: 60px;
            height: 20px;
            border-radius: 15px;
            background-color: orange;
        }

        .lineR::after{
            position: absolute;
            top: -10px;
            right: 70px;
            content: '';
            width: 60px;
            height: 20px;
            border-radius: 15px;
            background-color: dodgerblue;
        }

        #song{
            display: none;
        }

    </style>
</head>
<body>

<input id="testbpm" type="button" value="点击测试BPM">
<input id="startTime" type="button" value="开始游戏">
<br>
<br>
<br>
动画时间：<span id="aTime">0</span> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
时间差：<span id="dTime">0</span>
<br>
<br>
BPM：<span id="bpm">0</span>


<div id = "gd" class="gd">

    <p class="line"></p>
    <p class="line"></p>
    <p class="line"></p>
    <p class="line"></p>

    <div></div>

</div>

<div id="song">

    <p class="line"></p>
    <p class="line"></p>
    <p class="line"></p>
    <p class="line"></p>

    <p class="line lineR"></p>
    <p class="line lineL"></p>
    <p class="line lineL"></p>
    <p class="line lineL"></p>
    <p class="line lineR"></p>
    <p class="line lineR"></p>
    <p class="line lineR"></p>
    <p class="line lineR"></p>
    <p class="line lineL"></p>
    <p class="line lineL"></p>
    <p class="line lineL"></p>
    <p class="line lineL"></p>
    <p class="line lineR"></p>
    <p class="line lineR"></p>
    <p class="line lineR"></p>
    <p class="line lineR"></p>
    <p class="line lineL"></p>
    <p class="line lineL"></p>
    <p class="line lineL"></p>
    <p class="line lineR"></p>
    <p class="line lineL"></p>
    <p class="line lineL"></p>
    <p class="line lineL"></p>
    <p class="line lineR"></p>
    <p class="line lineL"></p>

    <p class="line"></p>
    <p class="line"></p>
    <p class="line"></p>
    <p class="line"></p>
</div>

<script>
    var d = new Date();
    var aTime = 0.8;


    var startTime = d.getTime();
    var lastTime = d.getTime();

    var arr = [];

    function bpm() {
        startTime = lastTime;
        lastTime = new Date().getTime();
        var dTime = lastTime - startTime;
        arr.push(dTime);
        remove();
        getAvg();
    }

    function removeP() {
        var song = document.getElementById("song");
        console.log(song.children.length);
        if(song.children.length === 0){
            console.log("游戏结束");
            return;
        }

        //console.log("移除时间和动画时间一致？" + aTime);
        var gd = document.getElementsByClassName("gd");
        var child = gd[0].children;
        gd[0].removeChild(child[3]);

        //之后将隐藏域的最后一个P添加轨道上
        var lastP = song.lastElementChild;
        song.removeChild(lastP);

        var gdDiv = document.getElementById("gd");
        var oldHtml = gdDiv.innerHTML;
        gdDiv.innerHTML = '';
        gdDiv.appendChild(lastP);
        gdDiv.innerHTML += oldHtml;

    }

    function runTime() {
        document.getElementById("aTime").innerText = aTime;
        var p = document.getElementsByClassName("line");
        for (var i = 0; i < p.length; i++) {
            p[i].style.animationDuration = aTime + 's';
        }

    }

    function getAvg() {
        var total = 0;
        for (var i = 0; i < arr.length; i++) {
            total += arr[i];
        }
        document.getElementById("dTime").innerText = total / arr.length;
        document.getElementById("bpm").innerText = 60000 / (total / arr.length);
        aTime = total / arr.length / 1000;

        runTime();
    }

    function remove() {
        if (arr.length > 3) {
            arr.remove(arr[0]);
        }
    }


    document.getElementById("testbpm").onkeydown = function (ev) {
        if (ev.keyCode === 13) {
            bpm();
        }
    };

    document.getElementById("testbpm").onclick = function (ev) {
        bpm();
    };

    document.getElementById("startTime").onclick = function(){
        //之后需要移除P标签以及新增P标签
        setInterval("removeP()",aTime * 1000);
    }

    Array.prototype.remove = function (val) {
        var index = this.indexOf(val);
        if (index > -1) {
            this.splice(index, 1);
        }
    };


</script>
</body>
</html>